<template>
	<view class="address">
		<view class="title">
			<view class="userinfo-item">
				<view class="userinfo-name">我的昵称</view>
				<view class="userinfo-value">
					<input @input="pickName" @blur="pickNameBlur" type="text" :value="myInfo.userName" placeholder="请填写收件人姓名">
					<!-- <image src="../../static/mine/right-arrow.png" mode="aspectFill" class="arrow"></image> -->
				</view>
			</view>
			<view class="userinfo-item">
				<view class="userinfo-name">手机号码</view>
				<view class="userinfo-value">
					<input @input="getMobile" maxlength="11" type="number" :value="myInfo.telNumber" placeholder="请填写收件人手机号">
				</view>
			</view>
			
			<view class="userinfo-item">
				<view class="userinfo-name">所在地区</view>
				<view class="userinfo-value">
					<picker @change="pickRegion" mode="region" :value="index" :range="region">
						<view class="picker">
							<view class="pickvalue" v-if="region">{{region}} </view>
							<view class="pickvalueTow" v-else>请选择省市区</view>
						<!-- 	<image src="../../static/mine/right-arrow.png" mode="aspectFill" class="arrow"></image> -->
						</view>
					 </picker>
				</view>
			</view>
			
			<view class="userinfo-item">
				<view class="userinfo-name">详细地址</view>
				<view class="userinfo-value">
					<input @input="pickAdd" type="text" :value="myInfo.detailInfo" placeholder="请填写详细地址">
				</view>
			</view>
			
		</view>
		
		<view class="foot">
			<view class="foot_box">
				<view class="pir">
				<view class="right">
					<view class="btn" @click="save()">保存</view>
				</view>	
				</view>
			</view>	
		</view>
		
	</view>
	
</template>

<script>
		import { pointsAddressAdd } from '../../apis/integral.js';
		import {
			receiverAddressEdit,
		} from '../../apis/my.js';
	export default {
		data() {
			return {
				phoneFlag:false,//手机号是真实的
				region:'',
				myInfo:{
					userName:'',
					telNumber:'',
					// region:'',
					detailInfo:'',
					provinceName:'',
					cityName:'',
					countyName:'',
				},
			}
		},
		onLoad(options){
			console.log(options,"optionsoptionsoptions")
			if(options.info){
				let dataInfo=JSON.parse(options.info)
				console.log(dataInfo,"dataInfo")
				this.myInfo=dataInfo
				this.region = dataInfo.provinceName+'·'+dataInfo.cityName+'·'+dataInfo.countyName;
			}
			
		},
		methods: {
			save(){
				console.log(this.myInfo,"myInfo")
				if(this.myInfo.telNumber.length!=11){
				  uni.showToast({
				    title: '请输入正确的手机号',
				    icon:"none",
				    duration:2000
				  })
					return;
				}
				
				// let data={
				// 	userName:this.myInfo.userName,
				// 	provinceName:'',
				// 	cityName:'',
				// 	countyName:'',
				// 	telNumber:this.myInfo.telNumber,
				// 	detailInfo:this.myInfo.detailInfo
				// }
				console.log(this.myInfo,"this.myInfo")
				
				
				receiverAddressEdit(this.myInfo).then(res=>{
					if(res.code==0){
						uni.showToast({
								title: '添加成功',
								duration: 2000,
								icon: "none"
						});
						setTimeout(function() {
										uni.navigateBack({
											delta: 1
										})
								}, 1000)
					}else{
						uni.showToast({
								title: res.message,
								duration: 2000,
								icon: "none"
						});
					}
					
									
						
					
				})
				
			},
			pickName(e){
				if(e.detail.value.length>11){
					uni.showToast({
						title:'最多可输入11个字',
						icon:'none'
					})
				}else {
					this.myInfo.userName = e.detail.value;
				}
			},
			pickNameBlur(e){
				if(e.detail.value.length>11){
					uni.showToast({
						title:'最多可输入11个字',
						icon:'none'
					})
				}else {
					// this.upadteInfo();
				}
			},
			pickAdd(e){
				this.myInfo.detailInfo = e.detail.value;
			},
			getMobile(e){
			    this.myInfo.telNumber=e.detail.value
			    if(this.myInfo.telNumber.length==11){
			      this.phoneExc();
			    }
		  },
			phoneExc(){
			    let that = this;
			    if(that.myInfo.telNumber){
			      let phoneFlag = /^(0|86|17951)?(10[0-9]|11[0-9]|12[0-9]|13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/.test(that.myInfo.telNumber);
			      if(!phoneFlag){
			        uni.showToast({
			          title: '请输入正确的手机号',
			          icon:"none",
			          duration:2000
			        })
			      }
			    }
			  },
			pickRegion(e){
				console.log(e,"eeee")
				this.region = e.detail.value[0]+'·'+e.detail.value[1]+'·'+e.detail.value[2];
				// this.myInfo.region = e.detail.value[0]+e.detail.value[1]+e.detail.value[2];
				
				this.myInfo.provinceName=e.detail.value[0]
				this.myInfo.cityName=e.detail.value[1]
				this.myInfo.countyName=e.detail.value[2]
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #EFEFEF;
	}
	
.address{
	width: 100%;
	.title{
		margin: 20rpx 20rpx 0;
		background: #fff;
		height: 400rpx;
		border-radius: 32rpx;
		padding: 30rpx ;
		.userinfo-item {
			font-size: 28rpx!important;
			color: #333333;
			line-height: 40rpx;
			padding: 30rpx 0;
			// border-bottom: 1rpx solid #efefef;
			display: flex;
			// justify-content: space-between;
		}
		.userinfo-name {
			// flex: 1;
			width: 160rpx;
		}
		.userinfo-value {
			display: flex;
			align-items: center;
		}
		.arrow {
			width: 32rpx;
			height: 32rpx;
			margin-left: 20rpx;
		}
		input {
			// text-align: right;
		}
		.pickvalue {
			min-width: 100rpx;
			text-align: right;
		}
		.pickvalueTow{
			font-size: 28rpx;
			color: #828080;
		}
		.picker {
			display: flex;
			line-height: 32rpx;
			// min-width: 100rpx;
			// text-align: right;
		}
	}
	.foot{
		height: 92rpx;
		width: 100%;
		position: fixed;
		bottom: 40rpx;
		z-index: 99;
		.foot_box{
			margin: 0 36rpx;
			height: 92rpx;
			// background: #fff;
			box-shadow: 0px 0px 20px rgba(162, 39, 0, 0.4);
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			.pir{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
			}
			.right{
				width: 100%;
				height: 100%;
				background: linear-gradient( 270deg, #FFAF40 0%, #FF5C04 100%);
				color: #FFFFFF;
				font-size: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40rpx;
				position: relative;
				.btn{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				button{
					    width: 100%;
					    height: 100%;
					    position: absolute;
					    top: 0;
					    left: 0;
					    opacity: 0;
				}
			}
		}
	}
}
</style>
